<template>
  <div class="inner">
    <div class="zaixianlvsss">
      <div class="zaixianlvsss_head">
        <div class="zaixianlvsss_head_itens">分类</div>
        <div class="zaixianlvsss_head_itens">数量</div>
        <div class="zaixianlvsss_head_itens">占比</div>
        <div class="zaixianlvsss_head_itens">分类</div>
        <div class="zaixianlvsss_head_itens">数量</div>
        <div class="zaixianlvsss_head_itens">占比</div>
      </div>
      <div class="zaixianlvsss_body">
        <vue-seamless-scroll :data="areaData" class="warp" :class-option="defaultOption">
          <div class="zaixianlvsss_body_items" v-for="(items, index) in areaData" :key="index">
            <span>{{ items.type }}</span>
            <span>{{ items.num }}</span>
            <span>{{ items.bi }}</span>
            <span>{{ items.type2 }}</span>
            <span>{{ items.num2 }}</span>
            <span>{{ items.bi2 }}</span>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      // areaData: [
      //   {
      //     type: "建筑/机械/重工/建材",
      //     num: 12600,
      //     bi: "7%",
      //     type2: "医院/各类专科医院",
      //     num2: 21600,
      //     bi2: "12%"
      //   },
      //   {
      //     type: "科技/电子/数码信息",
      //     num: 21600,
      //     bi: "12%",
      //     type2: "房产行业",
      //     num2: 5400,
      //     bi2: "3%"
      //   },
      //   {
      //     type: "餐饮行业",
      //     num: 7200,
      //     bi: "4%",
      //     type2: "教育行业",
      //     num2: 3600,
      //     bi2: "2%"
      //   },
      //   {
      //     type: "公务员",
      //     num: 18000,
      //     bi: "10%",
      //     type2: "文化/传媒/娱乐/演绎",
      //     num2: 14400,
      //     bi2: "8%"
      //   },
      //   {
      //     type: "物流/配送/旅游",
      //     num: 7200,
      //     bi: "4%",
      //     type2: "装饰/装修",
      //     num2: 3600,
      //     bi2: "2%"
      //   },
      //   {
      //     type: "地铁/铁路/公交/机场",
      //     num: 18000,
      //     bi: "10%",
      //     type2: "美容/美发/纹身",
      //     num2: 3600,
      //     bi2: "2%"
      //   },
      //   {
      //     type: "汽车/机车行业",
      //     num: 16200,
      //     bi: "9%",
      //     type2: "金融行业",
      //     num2: 1800,
      //     bi2: "1%"
      //   },
      //   {
      //     type: "商贸/贸易行业",
      //     num: 10800,
      //     bi: "6%",
      //     type2: "个体户",
      //     num2: 14400,
      //     bi2: "8%"
      //   }
      // ]
      areaData: [
        {
          type: "建筑/机械/重工/建材",
          num: 38499,
          bi: "7.0%",
          maleNum: Math.round(38499 * 0.75),
          femaleNum: Math.round(38499 * 0.25),
          type2: "医院/各类专科医院",
          num2: 66000,
          bi2: "12.0%",
          maleNum2: Math.round(66000 * 0.75),
          femaleNum2: Math.round(66000 * 0.25)
        },
        {
          type: "科技/电子/数码信息",
          num: 66000,
          bi: "12.0%",
          maleNum: Math.round(66000 * 0.75),
          femaleNum: Math.round(66000 * 0.25),
          type2: "房产行业",
          num2: 16500,
          bi2: "3.0%",
          maleNum2: Math.round(16500 * 0.75),
          femaleNum2: Math.round(16500 * 0.25)
        },
        {
          type: "餐饮行业",
          num: 21999,
          bi: "4.0%",
          maleNum: Math.round(21999 * 0.75),
          femaleNum: Math.round(21999 * 0.25),
          type2: "教育行业",
          num2: 10999,
          bi2: "2.0%",
          maleNum2: Math.round(10999 * 0.75),
          femaleNum2: Math.round(10999 * 0.25)
        },
        {
          type: "公务员",
          num: 55000,
          bi: "10.0%",
          maleNum: Math.round(55000 * 0.75),
          femaleNum: Math.round(55000 * 0.25),
          type2: "文化/传媒/娱乐/演绎",
          num2: 43999,
          bi2: "8.0%",
          maleNum2: Math.round(43999 * 0.75),
          femaleNum2: Math.round(43999 * 0.25)
        },
        {
          type: "物流/配送/旅游",
          num: 21999,
          bi: "4.0%",
          maleNum: Math.round(21999 * 0.75),
          femaleNum: Math.round(21999 * 0.25),
          type2: "装饰/装修",
          num2: 10999,
          bi2: "2.0%",
          maleNum2: Math.round(10999 * 0.75),
          femaleNum2: Math.round(10999 * 0.25)
        },
        {
          type: "地铁/铁路/公交/机场",
          num: 55000,
          bi: "10.0%",
          maleNum: Math.round(55000 * 0.75),
          femaleNum: Math.round(55000 * 0.25),
          type2: "美容/美发/纹身",
          num2: 10999,
          bi2: "2.0%",
          maleNum2: Math.round(10999 * 0.75),
          femaleNum2: Math.round(10999 * 0.25)
        },
        {
          type: "汽车/机车行业",
          num: 49499,
          bi: "9.0%",
          maleNum: Math.round(49499 * 0.75),
          femaleNum: Math.round(49499 * 0.25),
          type2: "金融行业",
          num2: 5499,
          bi2: "1.0%",
          maleNum2: Math.round(5499 * 0.75),
          femaleNum2: Math.round(5499 * 0.25)
        },
        {
          type: "商贸/贸易行业",
          num: 32999,
          bi: "6.0%",
          maleNum: Math.round(32999 * 0.75),
          femaleNum: Math.round(32999 * 0.25),
          type2: "个体户",
          num2: 43999,
          bi2: "8.0%",
          maleNum2: Math.round(43999 * 0.75),
          femaleNum2: Math.round(43999 * 0.25)
        }
      ]
    };
  },
  mounted(){
    let result = this.getTotalGenderStats(this.areaData)
    if(result) {
      this.$emit('getTotalGenderStats',result)
    }
  },
  methods: {
    // 统计男女比例
    getTotalGenderStats(areaData) {
      let totalMale = 0;
      let totalFemale = 0;
      for (let item of areaData) {
        // 累加第一个行业的男女数量
        totalMale += item.maleNum || 0;
        totalFemale += item.femaleNum || 0;

        // 累加第二个行业的男女数量
        totalMale += item.maleNum2 || 0;
        totalFemale += item.femaleNum2 || 0;
      }
      const total = totalMale + totalFemale;

      // 百分比计算
      const malePercent = total
        ? ((totalMale / total) * 100).toFixed(2) + "%"
        : "0%";
      const femalePercent = total
        ? ((totalFemale / total) * 100).toFixed(2) + "%"
        : "0%";

      // 最大公约数函数，用于简化比例
      function gcd(a, b) {
        return b === 0 ? a : gcd(b, a % b);
      }
      const g = gcd(totalMale, totalFemale);
      const ratio = `${Math.floor(totalMale / g)}:${Math.floor(
        totalFemale / g
      )}`;

      return {
        // 总男性人数：所有行业中 maleNum 和 maleNum2 的累加结果
        totalMale,
        // 总女性人数：所有行业中 femaleNum 和 femaleNum2 的累加结果
        totalFemale,
        // 总人数：总男性 + 总女性
        total,
        // 男性占比：(总男性 / 总人数) * 100，保留两位小数，并加上百分号 %
        malePercent,
        // 女性占比：(总女性 / 总人数) * 100，保留两位小数，并加上百分号 %
        femalePercent,
        // 男女比例：通过最大公约数（GCD）简化后的比例，例如 3:1 或 2:3
        ratio
      };
    }
  }
};
</script>

<style>
.zaixianlvsss {
  width: 100%;
  height: calc(100% - 4%);
  background: #35517836;
  margin-top: 10px;
  border-radius: 10px;
}

.zaixianlvsss_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 20px;
  font-size: 1rem;
  color: #4c9bfd;
  padding-top: 10px;
}

.zaixianlvsss_head_itens {
  width: 100%;
  display: flex;
  justify-content: center;
}

.zaixianlvsss_body {
  width: 100%;
  height: 160px;
  font-size: 1rem;
  color: #fff;
}

.zaixianlvsss_body_items {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 15px;
}

.zaixianlvsss_body_items span {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  color: #3771b9;
}

.warp {
  height: 630px;
  /* 设置滚动区域的高度 */
  overflow: hidden;
  /* 隐藏超出部分 */
  /* border: 1px solid #ccc; 可选：添加边框 */
}
</style>